<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈乐乐</title>
</head>
<body>
    <canvas id="box" width="600" height="600"></canvas>
    <script>
        var canvas = document.querySelector('#box');
        var ctx = canvas.getContext('2d');
        var pi = Math.PI
        // 创建一个左圆
        ctx.beginPath();
        ctx.arc(300, 300, 200, 1.5 * pi, 0.5 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#cccccc'
        ctx.fill()
        // 创建一个右圆
        ctx.beginPath();
        ctx.arc(300, 300, 200, 0.5 * pi, 1.5 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#000000'
        ctx.fill()
        // 创建上小半圆
        ctx.beginPath();
        ctx.arc(300, 200, 100, 0.5 * pi, 1.5 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#cccccc'
        ctx.fill()
        // 创建下小半圆
        ctx.beginPath();
        ctx.arc(300, 400, 100, 1.5 * pi, 0.5 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#000000'
        ctx.fill()
        // 创建小黑圆
        ctx.beginPath();
        ctx.beginPath();
        ctx.arc(300, 200, 25,0, 2 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#000000'
        ctx.fill()
        // 创建小白圆
        ctx.beginPath();
        ctx.arc(300, 400, 25,0, 2 * pi,true)
        ctx.closePath();
        ctx.fillStyle = '#cccccc'
        ctx.fill()
    </script>
</body>
</html>